<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="通知公告" :topheight="navBarHeight"></HeadNav>
		<view class="main">
			<view class="notice-item" v-for="(item,index) in noticeList" @click="jumpNotice(item.noticeId)">
				<view class="notice-up">
					<view class="notice-horn">
						<view class="notice-mark" v-if="!item.readStatus"></view>
						<image src="../../static/img/notice-01.png"></image>
					</view>

					<view class="notice-tit">{{ item.noticeTitle }}</view>

					<view class="notice-time">{{ item.createTime }}</view>

				</view>
				
				<view class="notice-content">{{ item.contentStandard }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { noticeListApi } from '@/api/api.js'
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				noticeList: []
			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			async getNoticeList() {
				const res = await noticeListApi()
				if(!res.code) {
					this.noticeList = res.data
				}
				
			},
			jumpNotice(id) {
				uni.navigateTo({
					url: '/pages/common/notice?id=' + id
				})
			}
			
		},
		onShow() {
			this.getNoticeList()
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;

		.main {
			// min-height: 200rpx;
			padding: 0 30rpx;
			padding-bottom: 30rpx;

			.notice-item {
				margin-top: 30rpx;
				// min-height: 240rpx;
				background: #fff;
				border-radius: 8rpx;
				padding: 30rpx;
				position: relative;

				.notice-up {
					display: flex;
					align-items: center;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					border-bottom: 2rpx solid #eee;

					.notice-horn {
						width: 48rpx;
						height: 48rpx;
						position: relative;

						.notice-mark {
							position: absolute;
							right: 0;
							width: 14rpx;
							height: 14rpx;
							z-index: 9;
							border-radius: 50%;
							background: red;
						}

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

					.notice-tit {
						flex: 1;
						margin: 0 16rpx;
						color: #333;
						font-size: 28rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}

					.notice-time {
						margin-left: auto;
						color: #999;
						font-size: 24rpx;
					}
				}



				.notice-content {
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					font-size: 24rpx;
					-webkit-box-orient: vertical;
					color: #666;
				}
			}

		}
	}
</style>